<template>
  <div class="list-todos"> <!--菜单容器-->
<!--绑定点击事件golist，判断当item.id等于todoid时，文字高亮-->
      <a @click="goList(item.id)" class="list-todo activeListClass list" :class="{'active': item.id === todoId }" v-for="(item,index) in todoList" :key="index">  <!--单个菜单容器-->
          <span class="icon-lock" v-if="item.lock"></span> <!--锁图标-->
          <span class="count-list" v-if="item.count > 0">{{item.count}}</span><!--数字-->
          {{item.title}}  <!--数据绑定-->
      </a>
      <a class="link-list-new" @click="addTodoList">
          <span class="icon-plus">
          </span>
          新增  
      </a>
  </div>
</template>
<script>

import { addTodo } from '../api/api';  //引入封装好的两个接口函数

export default {
  data(){
      return{
          items:[], //菜单数据
          todoId:'', //默认选中id
          todoNum:0 //新增一个状态数据判断待办事项数据  
      };
  },
  watch:{
      'todoId'(id){
          this.$router.push({ name:'todo', params:{ id:id}});
      }
  },
  computed: {
      todoList() {
          const number = this.$store.getters.getTodoList.length;
          if(this.$store.getters.getTodoList.length < this.todoNum){
              this.goList(this.$store.getters.getTodoList[0].id);
          }
          this.todoNum=number;
          //返回vuex getters.js 定义的getTodoList数据
          return this.$store.getters.getTodoList;
      }
  },
  created(){ //调用请求菜单列表数据接口
    // getTodoList({}).then(res => {
    //     const TODOS=res.data.todos; //数据都会返回在res.data里面
    //     this.items=TODOS;           //把菜单数据赋值给this.items
    //     this.todoId=TODOS[0].id;    //把菜单数据默认的第一个对象id赋值给默认选中的id
    // });
    this.$store.dispatch('getTodo').then(() => { //调用vuex action.js 里面的getTodo函数
        this.$nextTick(() =>{
            this.goList(this.todoList[0].id);
        });
    });
  },
  methods: {
      goList(id) {  //点击菜单时，替换选中id
          this.todoId=id;
      },
      addTodoList(){ //点击新增按钮时
        //调用新增菜单接口，在接口调用成功后
          addTodo({}).then(data => {
              this.$store.dispatch('getTodo').then(()=>{
                  this.$nextTick(()=>{
                      setTimeout(()=>{
                          this.goList(this.todoList[this.todoList.length-1].id);
                      }, 100);
                  })
              })
          });
      }
  },
  watch: {
      'todoId'(id) {
          this.$router.push({ name:'todo', params: { id:id }});
          //监听到用户的点击todoId的变化在跳转路由
      }
  },
};
</script>

<style lang="less">
@import '../common/style/menu.less';
</style>
